<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Gruppler's Effect Demos</title>

	<link rel="stylesheet" href="../../../dijit/tests/css/dijitTests.css" />

	<script type="text/javascript" src="../../../dojo/dojo.js"
		djConfig="parseOnLoad:true, isDebug:false"></script>
		
	<script type="text/javascript">
		dojo.require("dojox.fx.split");

		var intro1, intro2;
		var currentAnimation;
		var originalText;

		var init = function(){
			
			// Intro //
			dojo.style("header1", { "opacity":0, "visibility":"visible" });
			intro1 = dojox.fx.build({
				node: "header1",
				duration: 2000,
				rows: 8,
				columns: 1,
				interval: 125
			});

			intro1.play();
			// Split Effects //
			dojo.connect(dojo.byId("box_blockfade_1"), "onclick", null,
				function(){
					var node = dojo.byId("box_blockfade_1");
					if(parseFloat(node.style.opacity) < 1){
						return false;
					}
					var properties = {
						node: node,
						rows: 1,
						columns: 10
					};
					properties.onEnd = function(){
						currentAnimation = dojox.fx.blockFadeIn(dojo.mixin(properties, {onEnd: undefined}));
						currentAnimation.play();
					};
					currentAnimation = dojox.fx.blockFadeOut(properties);
					currentAnimation.play();

					/*
					// This is how we /should/ be able to do it...
					dojo.fx.chain([
						dojox.fx.blockFadeOut(properties),
						dojox.fx.blockFadeIn(properties)
					]).play();
					*/
				}
			);
			dojo.connect(dojo.byId("box_blockfade_2"), "onclick", null,
				function(){
					var node = dojo.byId("box_blockfade_2");
					if(parseFloat(dojo.style(node,"opacity")) < 1){
						return false;
					}
					var properties = {
						node: node,
						random: 0.25,
						reverseOrder: true
					};
					properties.onEnd = function(){
						currentAnimation = dojox.fx.blockFadeIn(dojo.mixin(properties, {onEnd: undefined}));
						currentAnimation.play();
					};
					currentAnimation = dojox.fx.blockFadeOut(properties);
					currentAnimation.play();
				}
			);

			dojo.connect(dojo.byId("box_disintegrate_1"), "onclick", null,
				function(){
					var node = dojo.byId("box_disintegrate_1");
					if(parseFloat(dojo.style(node,"opacity")) < 1){
						return false;
					}
					var properties = {
						node: node,
						distance: 1,
						crop: true,
						fade: false
					};
					properties.onEnd = function(){
						currentAnimation = dojox.fx.build(dojo.mixin(properties, {onEnd: undefined}));
						currentAnimation.play();
					};
					currentAnimation = dojox.fx.disintegrate(properties);
					currentAnimation.play();
				}
			);

			dojo.connect(dojo.byId("box_disintegrate_2"), "onclick", null,
				function(){
					var node = dojo.byId("box_disintegrate_2");
					if(parseFloat(dojo.style(node,"opacity")) < 1){
						return false;
					}
					var properties = {
						node: node,
						random: 0.5,
						distance: 2.5
					};
					properties.onEnd = function(){
						currentAnimation = dojox.fx.build(dojo.mixin(properties, {onEnd: undefined}));
						currentAnimation.play();
					};
					currentAnimation = dojox.fx.disintegrate(properties);
					currentAnimation.play();
				}
			);

			dojo.connect(dojo.byId("box_explode_1"), "onclick", null,
				function(){
					var node = dojo.byId("box_explode_1");
					if(parseFloat(dojo.style(node,"opacity")) < 1){
						return false;
					}
					var properties = {
						node: node,
						rows: 2,
						columns: 2,
						distance: 0.75,
						easing: dojo.fx.easing.elasticOut,
						fade: false,
						crop: true
					};
					properties.onEnd = function(){
						currentAnimation = dojox.fx.converge(dojo.mixin(properties,
						{
							onEnd: undefined,
							easing: dojo.fx.easing.bounceOut
						}));
						currentAnimation.play()
					};
					currentAnimation = dojox.fx.explode(properties);
					currentAnimation.play();
				}
			);

			dojo.connect(dojo.byId("box_explode_2"), "onclick", null,
				function(){
					var node = dojo.byId("box_explode_2");
					if(parseFloat(dojo.style(node,"opacity")) < 1){
						return false;
					}
					var properties = {
						node: node,
						rows: 5,
						columns: 5,
						distance: 1.5,
						duration: 1500,
						random: 0.75
					};
					properties.onEnd = function(){
						currentAnimation = dojox.fx.converge(dojo.mixin(properties, {onEnd: undefined}));
						currentAnimation.play();
					};
					currentAnimation = dojox.fx.explode(properties);
					currentAnimation.play();
				}
			);

			dojo.connect(dojo.byId("box_shear_1"), "onclick", null,
				function(){
					var node = dojo.byId("box_shear_1");
					if(parseFloat(dojo.style(node,"opacity")) < 1){
						return false;
					}
					var properties = {
						node: node,
						interval: 50,
						distance: 0.95,
						rows: 10,
						columns: 1,
						fade: false,
						crop: true,
						reverseOrder: true
					};
					properties.onEnd = function(){
						currentAnimation = dojox.fx.unShear(dojo.mixin(properties, {onEnd: undefined}));
						currentAnimation.play();
					};
					currentAnimation = dojox.fx.shear(properties);
					currentAnimation.play();
				}
			);

			dojo.connect(dojo.byId("box_shear_2"), "onclick", null,
				function(){
					var node = dojo.byId("box_shear_2");
					if(parseFloat(dojo.style(node,"opacity")) < 1){
						return false;
					}
					var properties = {
						node: node,
						random: 1
					};
					properties.onEnd = function(){
						currentAnimation = dojox.fx.unShear(dojo.mixin(properties, {onEnd: undefined}));
						currentAnimation.play();
					};
					currentAnimation = dojox.fx.shear(properties);
					currentAnimation.play();
				}
			);

			dojo.connect(dojo.byId("box_pinwheel_1"), "onclick", null,
				function(){
					var node = dojo.byId("box_pinwheel_1");
					if(parseFloat(dojo.style(node,"opacity")) < 1){
						return false;
					}
					var properties = {
						node: node,
						fade: false
					};
					properties.onEnd = function(){
						currentAnimation = dojox.fx.unPinwheel(dojo.mixin(properties, {onEnd: undefined}));
						currentAnimation.play();
					};
					currentAnimation = dojox.fx.pinwheel(properties);
					currentAnimation.play();
				}
			);

			dojo.connect(dojo.byId("box_pinwheel_2"), "onclick", null,
				function(){
					var node = dojo.byId("box_pinwheel_2");
					if(parseFloat(dojo.style(node,"opacity")) < 1){
						return false;
					}
					var properties = {
						node: node,
						random: 1,
						rows: 5,
						columns: 5
					};
					properties.onEnd = function(){
						currentAnimation = dojox.fx.unPinwheel(dojo.mixin(properties, {onEnd: undefined}));
						currentAnimation.play();
					};
					currentAnimation = dojox.fx.pinwheel(properties);
					currentAnimation.play();
				}
			);
		} // end init
		dojo.addOnLoad(init);
	</script>

	<style type="text/css">
		h1 {
			margin: 0;
	  	}

		hr {
		}

	  hr.thick {
	  }

	  .box {
		height: 100px;
		width: 100px;
		overflow: visible;
	  }

	  .box {
		color: #292929;
		border: 1px solid #999;
		background-color: #ddd;
		cursor: pointer;
		overflow: hidden;
		margin: 0;
		padding: 0;
	  }


	  .textBox p {
		width: 100px;
		height: 100px;
	  }

	  .box p, .box code {
		margin: 0;
		text-align: left;
	  }

	  .effectList {
		list-style: none;
		padding: 0;
		font-size: 10px;
		margin: 0;
	  }

	  .effectList li {
		float: left;
		display:block;
		padding: 1em;
	  }

	  .vl, .vr {
		border: 0px dotted #999;
	  }

	  .vl {
		border-left-width: 4px;
	  }

	  .vr {
		border-right-width: 4px;
	  }
	</style>
</head>
<body>
	<h1 id="header1">dojox.fx.split</h1>
	Each effect is highly configurable.	 Here is a general list of the options available in each effect:
	<ul>
		<li>The number of rows and columns in which to split the element</li>
		<li>The distance the pieces travel (as a multiple of the element's respective dimensions)</li>
		<li>Whether or not to fade the pieces in/out</li>
		<li>How much the effect should be randomized (a percentage)</li>
		<li>Whether or not the pieces should appear outside the element's boundries</li>
	</ul>
	<p style="font-weight: bold">
		Just click each box to play its animation!
	</p>
	<hr />
	<ul class="effectList">
	  <li>BlockFadeOut,<br />BlockFadeIn uniformly
		<div id='box_blockfade_1' class="box">
		  <code>
			rows: 1<br />
			columns: 10
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li class="vr">BlockFadeOut,<br />BlockFadeIn randomly
		<div id='box_blockfade_2' class="box">
		  <code>
			random: 0.25<br />
			reverseOrder: true
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li>Disintegrate, Build<br />uniformly (cropped)
		<div id='box_disintegrate_1' class="box">
		  <code>
			distance: 1<br />
			crop: true<br />
			fade: false
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li class="vr">Disintegrate, Build<br />randomly
		<div id='box_disintegrate_2' class="box">
		  <code>
			random: 0.5<br />
			distance: 2.5
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li>Explode, Converge<br />uniformly (cropped)
		<div id='box_explode_1' class="box">
		  <code>
			rows: 2<br />
			columns: 2<br />
			distance: 0.75<br />
			fade: false<br />
			crop: true<br />
			(custom easing)
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li class="vr">Explode, Converge<br />randomly
		<div id='box_explode_2' class="box">
		  <code>
			rows: 5<br />
			columns: 5<br />
			distance: 1.5<br />
			duration: 1500<br />
			random: 0.75
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li>Shear, UnShear<br />rows (cropped)
		<div id='box_shear_1' class="box">
		  <code>
			interval: 50<br />
			distance: 0.95<br />
			rows: 10<br />
			columns: 1<br />
			fade: false<br />
			crop: true<br />
			reverseOrder: true
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li class="vr">Shear, UnShear<br />rows and columns
		<div id='box_shear_2' class="box">
		  <code>
			random: 1
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li>Pinwheel, UnPinwheel<br />uniformly
		<div id='box_pinwheel_1' class="box">
		  <code>
			fade: false
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
		<li>Pinwheel, UnPinwheel<br />randomly
		<div id='box_pinwheel_2' class="box">
		  <code>
			random: 1<br />
			rows: 5<br />
			columns: 5
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
		</li>
	</ul>
	<div style="height:400px"></div>
</body>
</html>
